<template>
    <div>
        <div v-if="!arr">疯狂加载中</div>
        <div class="box" v-if="arr">
            <div class="time">
        <span>日期</span> {{myPurchase}}

            </div>
            <div class="loading"  v-if="it">
        <van-loading type="spinner" color="#1989fa" />
        </div>
            <ul v-if="!it">
                <li v-for="(item,index) in arr" :key="index" @click="tiao(item.id)">
                        <div class="timu-box">
                            <div class="timu">{{item.name}} <span>{{item.sellPrice}}元起</span></div>
                        </div>
                        <div class="jie-box">
                            <div class="jie">{{item.addr}}</div>
                            <div class="luCheng">{{item.distance}}</div>
                        </div>
                        <div class="biaoQian-box">
                            <div class="biao-qian-ul">
                                <div class="biao-qian-li" :style="{color: items.color,borderColor: items.color}" v-for="(items,indexs) in item.labels" :key="indexs">
                                    {{items.name}}
                                </div>
                            </div>
                        </div>
                        <div class="kaiKa" v-if="item.promotion.cardPromotionTag">
                            <img src="//p1.meituan.net/scarlett/ff1c6e33ed0ac3cd862910a83d4bf959583.png" alt="">
                            <span>{{item.promotion.cardPromotionTag}}</span>
                        </div>
                        <div class="changCI">{{item.showTimes}}</div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        myPurchase:[Array,String]
    },
    data(){
        return{
            arr:null,
            it:true,
            brr:null

        }
    },
    watch:{
       brr(){
    //        console.log(1);
    //    this.qingQiu(this.params,this.$route.params.id,this.$store.state.myctsid)

       }
    },
    methods:{
        // 封装请求数据函数
          async qingQiu(a,b,c){
        //   let re = await this.axios.get(`https://apis.netstart.cn/maoyan/movie/select/cinemas?limit=20&offset=0&client=iphone&channelId=4&showDate=${a}&movieId=${b}&sort=distance&cityId=${c}`)
        //   let re = await this.axios.get(`https://apis.netstart.cn/maoyan/movie/select/cinemas?limit=20&offset=0&client=iphone&channelId=4&showDate=&movieId=&sort=distance&cityId=`)
        //    let re = await this.axios.get(`https://apis.netstart.cn/maoyan/movie/select/cinemas?limit=20&showDate=${a}&movieId=${b}&cityId=${c}`)
           let re = await this.axios.get(`https://apis.netstart.cn/maoyan/movie/select/cinemas?limit=20&showDate=${this.brr}&movieId=${this.$route.params.id}&cityId=${this.$store.state.myctsid}`)
            console.log(this.myPurchase);
            console.log(this.brr);
            console.log(re.data.data.cinemas,this.myPurchase,this.brr);
            this.arr = re.data.data.cinemas
        },
          time(){
          let dd =setInterval(() => {
             this.it =false
             window.clearInterval(dd)
          }, 3000);
      },
      tiao(a){
          console.log(a);
          this.$router.push("/lunBotu")
          this.$store.commit("yinYuanID",a)

      }

    },
    created(){
        // console.log(this.myPurchase,this.$route.params.id,this.$store.state.myctsid);
    //    this.qingQiu(this.myPurchase,this.$route.params.id,this.$store.state.myctsid)
       this.brr = this.myPurchase
       this.qingQiu()
       this.time()

     

    }
    
    
}
</script>
<style lang="less" scoped>
.box{
    .time{
        font-size: 20px;
        padding: 10px 0 0 0;
        color: #e54847 !important;
        span{
          color:   rgb(255, 153, 0);
        }

    }
     .loading{
        display: inline-block;
        text-align: center;
        margin-left: 50%;
        transform: translateX(-50%);
    }
    ul{
        li{
            font-size: 17px;
            width: 100%;
            box-sizing: border-box;
            padding: 15px 10px;
            border-bottom: 1px solid #f0f0f0f0;
            .timu-box{
                width: 100%;
              
                font-size: 17px;
                color: #000;
                line-height: .46rem;
                font-weight: 400;
                margin: 10px 0;
                .timu{
                    	white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    span{
                        color: red;
                    
                    }
                }
               
               
              
            }
            .jie-box{
                color: #666;
                display: flex;
                justify-content: space-between;
                .jie{
                         font-size: 15px;
                    	white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;



                }
                .luCheng{
                    font-size: 10px;
                    // margin-left: auto;

                }
            }
            .biaoQian-box{
                margin: 5px 0;
                .biao-qian-ul{
                    display: flex;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;


                    .biao-qian-li{
                        border: 1px solid;
                        font-size: 12px;
                        margin: 0 4px;
                        padding: 1px 2px;
                        border-radius:3px;
                        white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                        
                    }

                }
            }
            .kaiKa{
                margin-top: 15px ;
                img{
                    width: 15px;
                    height: 14px;
                    vertical-align: text-top;
                }
                span{
                    vertical-align: text-top;
                    font-size: 10px;
                    margin-left: 6px;
                    color: #999;

                }
            }
            .changCI{
                font-size: 10px;
                color: #999;
                    
            }

        }
    }
}
</style>